<template>
    <div class="privacyPolicy">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Privacy Policy
            </div>
        </div>
        <!-- 协议 -->
        <div class="xieyi">
            <div class="xieyi-top">Privacy Policy</div>
            <div class="xieyi-content">
                <iframe src="https://app.buddyparty.xyz/supercargo-hypolydian-feedlot/subdeaconry/fug-docket/st9xjv.html"
                    frameborder="0"></iframe>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from "vant";
export default {
    data() {
        return {

        }
    },
    methods: {
        doClick() {
            this.$router.back()
            Toast('Agreement authorized successfully')
        }
    },
    created(){
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    }
}
</script>
<style lang="less" scoped>
@a: 3.75vw;

.privacyPolicy {
    width: 100vw;
    height: (667/@a);
    background-color: #f5f5f5;
    padding-top: (56/@a);
    box-sizing: border-box;

    .xieyi {
        width: (330/@a);
        height: (513/@a);
        margin-top: (10/@a);
        margin-left: (23/@a);
        border-radius: (15/@a);

        .xieyi-top {
            height: (55/@a);
            background-color: #9f3dff;
            text-align: center;
            line-height: (55/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 700;
            font-size: (24/@a);
            color: #FFFFFF;
            border-radius: (15/@a) (15/@a) 0 0;
        }

        .xieyi-content {
            height: (408/@a);
            background-color: #fff;

            iframe {
                width: 100%;
                height: 100%;
            }
        }

        .xieyi-bottom {
            height: (50/@a);
            display: flex;

            .xieyi-cancel {
                width: 50%;
                height: (50/@a);
                text-align: center;
                line-height: (50/@a);
                background-color: #F0F0F0;
                border-radius: 0px 0px 0px (15/@a);
                font-family: 'Inter';
                font-style: normal;
                font-weight: 700;
                font-size: (18/@a);
                color: #CECECE;
            }

            .xieyi-continue {
                width: 50%;
                height: (50/@a);
                text-align: center;
                line-height: (50/@a);
                background-color: #c0a0ff;
                font-family: 'Inter';
                font-style: normal;
                font-weight: 700;
                font-size: (18/@a);
                color: #FFFFFF;
                border-radius: 0px 0px (15/@a) 0px;
            }
        }
    }

    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (135/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }
}
</style>